<template>
    <BaseDialog v-bind="dialogInfo">
        <BaseForm ref="BaseFormRef" v-bind="formInfo"></BaseForm>
    </BaseDialog>
</template>

<script lang="jsx" setup>
import { inject, reactive, ref } from 'vue'
import { useDialogCRUD } from '@/composables'
import * as api from '#/systemManagement/api/accountManagement'

const emit = defineEmits(['submit'])

const BaseFormRef = ref(null)

const formInfo = reactive({
    labelWidth: '120px',
    formList: [
        {
            type: 'input',
            prop: 'username',
            label: '用户姓名',
            rules: { required: true, message: '字段必填', trigger: 'blur' },
            props: {
                disabled: true
            },
            col: {
                span: 24
            }
        },
        {
            type: 'input',
            prop: 'acode',
            label: '用户编码',
            rules: { required: true, message: '字段必填', trigger: 'blur' },
            props: {
                disabled: true
            },
            col: {
                span: 24
            }
        },
        {
            type: 'input',
            prop: 'password',
            label: '输入新密码',
            rules: { required: true, message: '字段必填', trigger: 'blur' },
            props: {
                type: 'password',
                'show-password': true
            },
            col: {
                span: 24
            }
        },
        {
            type: 'input',
            prop: 'verifyPassword',
            label: '再次输入密码',
            rules: [
                { required: true, message: '字段必填', trigger: 'blur' },
                {
                    validator: (rule, value, callback) => {
                        if (value !== formInfo.formData.password) {
                            callback(new Error('两次密码不一致'))
                        } else {
                            callback()
                        }
                    },
                    trigger: 'blur'
                }
            ],
            props: {
                type: 'password',
                'show-password': true
            },
            col: {
                span: 24
            }
        }
    ],
    formData: {},
    defaultFormData: () => ({})
})

const { dialogInfo, toggleDialog, openDialog } = useDialogCRUD({
    api: {
        updateData: api.updatePsw
    },
    BaseFormRef,
    formInfo,
    mergeDialogInfo: {
        width: 400
    },
    customBeforeOpen: async (opFlag, data) => {
        
    },
    customAfterOpen: async (opFlag, data) => {
        Object.assign(dialogInfo, {
            header: '修改密码'
        })
    },
    customConfirmFormData: formData => {
        const { kid, password } = formData
        return { kid, password }
    },
    customAfterConfirm: () => {
        emit('submit')
    }
})

defineExpose({
    toggleDialog,
    openDialog
})
</script>

<style lang="scss" scoped></style>